• There are some minor difference between the angular toolbar and this one.

  Here's a comparison, angular on the right, wc on the left.
  

  Notice that:

  • Title "HR Portal" is not aligned to the left in the wc one.
  • Button text in the toolbar is darker in the Angular one, compared to the wc one.

• Also after sorting a column, in angular a new button for clearing sort shows. In wc it does not show:

• If we compare both the angular and wc sample with the figma design:

  • Title in design is "Actions", while in the sample it is "HR Portal"
  • Column "Name" is initially sorted in the design, but not in the samples.

  Either the samples or the design should be updated so that there are no differences.

• Noticed that there are also some console.logs left over. Those should be removed:
  

• There are some minor difference between the angular toolbar and this one.
  Here's a comparison, angular on the right, wc on the left.
  
  Notice that:

  • Title "HR Portal" is not aligned to the left in the wc one.
  • Button text in the toolbar is darker in the Angular one, compared to the wc one.

• Also after sorting a column, in angular a new button for clearing sort shows. In wc it does not show:

• If we compare both the angular and wc sample with the figma design:

  • Title in design is "Actions", while in the sample it is "HR Portal"
  • Column "Name" is initially sorted in the design, but not in the samples.

  Either the samples or the design should be updated so that there are no differences.

• Noticed that there are also some console.logs left over. Those should be removed:
  

Added the sorting button and changed the title to actions. Regarding text color, I have not set any formatting to it in both samples, so i guess it comes with difference in themes between WC in Angular. We can comment further if this needs to be changed. Regarding the toolbar title alignment, it does not align on the right side for me. Maybe someone else can test it too?

• There are some minor difference between the angular toolbar and this one.
  Here's a comparison, angular on the right, wc on the left.
  
  Notice that:

  • Title "HR Portal" is not aligned to the left in the wc one.
  • Button text in the toolbar is darker in the Angular one, compared to the wc one.

• Also after sorting a column, in angular a new button for clearing sort shows. In wc it does not show:

• If we compare both the angular and wc sample with the figma design:

  • Title in design is "Actions", while in the sample it is "HR Portal"
  • Column "Name" is initially sorted in the design, but not in the samples.

  Either the samples or the design should be updated so that there are no differences.

• Noticed that there are also some console.logs left over. Those should be removed:
  

Added the sorting button and changed the title to actions. Regarding text color, I have not set any formatting to it in both samples, so i guess it comes with difference in themes between WC in Angular. We can comment further if this needs to be changed. Regarding the toolbar title alignment, it does not align on the right side for me. Maybe someone else can test it too?

@tishko0

• Regarding the styling of the text in the buttons, the same does not happen in the web component samples. If you get one of the samples, lets say this one : https://www.infragistics.com/products/ignite-ui-web-components/web-components/components/grids/grid/toolbar
  And change the theme to fluent, for example: https://codesandbox.io/p/sandbox/solitary-bash-ql6797

Then the text has the same styles as in angular:

So it seems to be some issue with the sample or the configuration in lit with the theming.

• Regarding the text of the title, I assume the design is outdated and the one in angular is the correct one. @dkamburov probably has more information.

• Another issue I noticed with the latest changes is that the sample does not flex to the full 100% width:
  
  It's probably missing a flex-grow or something to grow the content to the page size.

• Also, the "Clear Sort" button is there, but for some reason the icon is outside of it and it doesn't look good when you hover it:
  

It should be inside, like in angular: